        
            <section class="row">
                <div class="col-lg-12">
                    <div>
                        <h1>Form</h1>
                    </div>
                    <div>
                        <ol class="breadcrumb">
                            <li><a href="#"><i class="glyphicon glyphicon-home"></i></a></li>
                            <li>Forms</li>
                            <li class="active">Form Advance</li>
                        </ol>
                    </div>
                </div>
            </section>

        <div class="ajax-container">
            <section class="row">
                <div class="col col-lg-12 col-md-12 col-sm-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h2 class="panel-title"><i class="glyphicon glyphicon-user"></i> Horizontal</h3>
                        </div>
                        <div class="panel-body form-container">
                            <form id="advance-form" action="<?= base_url() ?>forms/validate" method="post" class="form-bordered form-horizontal">
                                <fieldset>
                                    <legend>Column 1</legend>
                                    <ul>
                                        <li class="form-group row">
                                            <label for="photo" class="control-label col-3">
                                                Photo*<br>
                                                <small>(image files)</small><br>
                                                <small>(jpg,png,gif)</small>
                                            </label>
                                            <div class="control-group col-9">
                                                <div class="input-size">
                                                    <div class="fileinput fileinput-new" data-provides="fileinput">
                                                        <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
                                                            <img src="<?= base_url() ?>resources/images/no_image.gif" data-src="<?= base_url() ?>resources/images/no_image.gif" alt="...">
                                                        </div>
                                                        <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
                                                        <div>
                                                            <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input name="photo" id="photo" type="file"></span>
                                                            <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        
                                        <li class="form-group row">
                                            <label for="email" class="control-label col-3">
                                                Email*<br>
                                                <small>sample_email@domain.com</small>
                                            </label>
                                            <div class="control-group input-center col-9">
                                                <div class="input-size col-12">
                                                    <div class="input-group">
                                                        <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                                                        <input type="text" name="email" id="email" class="form-control" placeholder="markangeloangulo@gmail.com">
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        
                                        <li class="form-group row">
                                            <label for="spinner" class="control-label col-3">
                                                My Spinner*<br>
                                                <small>.btSpinner()</small>
                                            </label>
                                            <div class="control-group input-center col-9">
                                                <div class="input-size col-12">
                                                    <div class="input-group">
                                                        <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                                        <input type="text" name="spinner" id="spinner" class="form-control spinner" placeholder="0">
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        
                                        <li class="form-group row">
                                            <label for="time-12hr" class="control-label col-3">
                                                Time*<br>
                                                <small>(h:mm am)</small>
                                            </label>
                                            <div class="control-group col-9">
                                                <div class="input-size col-12">
                                                    <div class="input-group">
                                                        <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
                                                        <input type="text" name="time-12hr" id="time-12hr" class="form-control" placeholder="9:45 PM">
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        
                                        <li class="form-group row">
                                            <label for="time-12hr-sec" class="control-label col-3">
                                                Time*<br>
                                                <small>(h:mm:ss am)</small>
                                            </label>
                                            <div class="control-group col-9">
                                                <div class="input-size col-12">
                                                    <div class="input-group">
                                                        <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
                                                        <input type="text" name="time-12hr-sec" id="time-12hr-sec" class="form-control" placeholder="9:45:30:08 PM">
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        
                                        <li class="form-group row">
                                            <label for="time-24hr" class="control-label col-3">
                                                Time*<br>
                                                <small>(h:mm)</small>
                                            </label>
                                            <div class="control-group col-9">
                                                <div class="input-size col-12">
                                                    <div class="input-group">
                                                        <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
                                                        <input type="text" name="time-24hr" id="time-24hr" class="form-control" placeholder="14:45">
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        
                                        <li class="form-group row">
                                            <label for="time-24hr-sec" class="control-label col-3">
                                                Time*<br>
                                                <small>(h:mm:ss)</small>
                                            </label>
                                            <div class="control-group col-9">
                                                <div class="input-size col-12">
                                                    <div class="input-group">
                                                        <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
                                                        <input type="text" name="time-24hr-sec" id="time-24hr-sec" class="form-control" placeholder="14:45:08">
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        
                                        <li class="form-group row">
                                            <label for="date" class="control-label col-3">
                                                Date*<br>
                                                <small>(mm/dd/yyyy)</small>
                                            </label>
                                            <div class="control-group col-9">
                                                <div class="input-size col-12">
                                                    <div class="input-group">
                                                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                                        <input type="text" name="date" id="date" class="form-control" placeholder="03/14/2014">
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="form-group row">
                                            <label for="datetimepicker" class="control-label col-3">
                                                Datetime*<br>
                                                <small>(mm/dd/yyyy h:mm am)</small>
                                            </label>
                                            <div class="control-group col-9">
                                                <div class="input-size col-12">
                                                    <div class="input-group date">
                                                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                                        <input type="text" name="datetimepicker" id="datetimepicker" class="form-control" placeholder="03/14/2014 9:05 AM">
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="form-group row">
                                            <label for="date-time" class="control-label col-3">
                                                Datetime<br>
                                                <small class="help-block">(mm/dd/yyyy hh:mm am)</small>
                                            </label>
                                            <div class="control-group col-9">
                                                <div class="input-size col-12">
                                                    <div class="input-group">
                                                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                                        <input type="text" name="date-time" id="date-time" class="form-control" placeholder="03/14/2014 9:05 AM">
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="form-group row">
                                            <label for="date-range" class="control-label col-3">
                                                Date Range*<br>
                                                <small>(mm/dd/yyyy - mm/dd/yyyy)</small>
                                            </label>
                                            <div class="control-group col-9">
                                                <div class="input-size col-12">
                                                    <div class="input-group">
                                                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                                        <input type="text" name="date-range" id="date-range" class="form-control" placeholder="03/14/1989 - 03/14/2014">
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="form-group row">
                                            <label for="date-time-range" class="control-label col-3">
                                                Datetime Range*<br>
                                                <small>(mm/dd/yyyy hh:mm am - )</small>
                                            </label>
                                            <div class="control-group col-9">
                                                <div class="input-size col-12">
                                                    <div class="input-group">
                                                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                                        <input type="text" name="date-time-range" id="date-time-range" class="form-control" placeholder="03/14/1989 07:15 AM - 03/14/2014 08:30 PM">
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="form-group row">
                                            <label for="color-hex" class="control-label col-3">
                                                Hex Color*<br>
                                                <small>(#000000)</small>
                                            </label>
                                            <div class="control-group col-9">
                                                <div class="input-size col-12">
                                                    <div class="input-group">
                                                        <span class="input-group-addon"><i class="fa fa-tint"></i></span>
                                                        <input type="text" name="color-hex" id="color-hex" class="form-control" placeholder="#ffffff">
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="form-group row">
                                            <label for="color-rgb" class="control-label col-3">
                                                RGB Color*<br>
                                                <small>rgb(255,255,255)</small>
                                            </label>
                                            <div class="control-group col-9">
                                                <div class="input-size col-12">
                                                    <div class="input-group">
                                                        <span class="input-group-addon"><i class="fa fa-tint"></i></span>
                                                        <input type="text" name="color-rgb" id="color-rgb" class="form-control" placeholder="rgb(255,255,255)">
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="form-group row">
                                            <label for="color-rgba" class="control-label col-3">
                                                RGBA Color*<br>
                                                <small>rgba(255,255,255,0.25)</small>
                                            </label>
                                            <div class="control-group col-9">
                                                <div class="input-size col-12">
                                                    <div class="input-group">
                                                        <span class="input-group-addon"><i class="fa fa-tint"></i></span>
                                                        <input type="text" name="color-rgba" id="color-rgba" class="form-control" placeholder="rgba(255,255,255,0.25)">
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="form-group row">
                                            <label for="color-hsl" class="control-label col-3">
                                                HSL Color*<br>
                                                <small>hsl(50,50%,50%)</small>
                                            </label>
                                            <div class="control-group col-9">
                                                <div class="input-size col-12">
                                                    <div class="input-group">
                                                        <span class="input-group-addon"><i class="fa fa-tint"></i></span>
                                                        <input type="text" name="color-hsl" id="color-hsl" class="form-control" placeholder="hsl(50%,50%,50%)">
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="form-group row">
                                            <label for="color-hsla" class="control-label col-3">
                                                HSLA Color*<br>
                                                <small>hsla(50,50%,50%,0.25)</small>
                                            </label>
                                            <div class="control-group col-9">
                                                <div class="input-size col-12">
                                                    <div class="input-group">
                                                        <span class="input-group-addon"><i class="fa fa-tint"></i></span>
                                                        <input type="text" name="color-hsla" id="color-hsla" class="form-control" placeholder="hsla(50,50%,50%,0.25)">
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="form-group row">
                                            <label for="switch" class="control-label col-3">
                                                Switch<br>
                                                <small>(on/off switch)</small>
                                            </label>
                                            <div class="control-group col-9">
                                                <div class="input-size col-12">
                                                    <div class="input-group">
                                                        <input type="checkbox" name="switch" id="switch" class="form-control switch">
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="form-group row">
                                            <label for="tags-input" class="control-label col-3">
                                                Tags Input*<br>
                                                <small>(valid_emails)</small>
                                            </label>
                                            <div class="control-group col-9">
                                                <div class="input-size col-12">
                                                    <input type="text" name="tags-input" id="tags-input" class="form-control" placeholder="Tags">
                                                </div>
                                            </div>
                                        </li>
                                        <li class="form-group row">
                                            <label for="button-upload" class="control-label col-3">
                                                Button Upload*<br>
                                                <small>(mp3,wav)</small>
                                            </label>
                                            <div class="control-group col-9">
                                                <div class="input-size">
                                                    <div class="fileinput fileinput-new" data-provides="fileinput">
                                                        <span class="btn btn-default btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span><input type="file" name="button-upload" id="button-upload"></span>
                                                        <span class="fileinput-filename"></span>
                                                        <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="form-group row">
                                            <label for="file-upload" class="control-label col-3">
                                                File Upload*<br>
                                                <small>(txt,rtf,doc,docx,csv,xls,xlsx)</small>
                                            </label>
                                            <div class="control-group col-9">
                                                <div class="input-size col-12">
                                                    <div class="fileinput fileinput-new input-group" data-provides="fileinput">
                                                        <div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
                                                        <span class="input-group-addon btn btn-default btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span><input type="file" name="file-upload" id="file-upload"></span>
                                                        <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        
                                        <li class="form-group row">
                                            <label for="country" class="control-label col-3">Country</label>
                                            <div class="control-group col-9">
                                                <div class="input-size">
                                                    <div class="input-group">
                                                        <span class="input-group-addon"><i class="fa fa-globe"></i></span>
                                                        <select name="country" id="country" class="form-control">
                                                            <option value=""> - Select Country - </option>
                                                            <option value="PH">Philippines</option>
                                                            <option value="US">United States</option>
                                                            <option value="PH">Pakistan</option>
                                                            <option value="US">Vietnam</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="form-group row">
                                            <label for="country2" class="control-label col-3">Country</label>
                                            <div class="control-group col-9">
                                                <div class="input-size">
                                                    <div class="input-group">
                                                        <span class="input-group-addon"><i class="fa fa-globe"></i></span>
                                                        <select name="country2" id="country2" class="form-control" multiple>
                                                            <option value=""> - Select Country - </option>
                                                            <option value="PH">Philippines</option>
                                                            <option value="US">United States</option>
                                                            <option value="PH">Pakistan</option>
                                                            <option value="US">Vietnam</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="form-group row">
                                            <label for="country-image1" class="control-label col-3">Country</label>
                                            <div class="control-group col-9">
                                                <div class="input-size">
                                                    <div class="input-group">
                                                        <span class="input-group-addon"><i class="fa fa-globe"></i></span>
                                                        <select name="country-image1" id="country-image1" class="form-control">
                                                            <option value=""> - Select Country - </option>
                                                            <option value="PH" data-img-src="<?= base_url() ?>resources/images/cartoons/grim/1.jpg">Philippines</option>
                                                            <option value="US" data-img-src="<?= base_url() ?>resources/images/cartoons/grim/2.png">United States</option>
                                                            <option value="PH" data-img-src="<?= base_url() ?>resources/images/cartoons/grim/3.png">Pakistan</option>
                                                            <option value="US" data-img-src="<?= base_url() ?>resources/images/cartoons/grim/2.png">Vietnam</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="form-group row">
                                            <label for="country-image" class="control-label col-3">Country</label>
                                            <div class="control-group col-9">
                                                <div class="input-size">
                                                    <div class="input-group">
                                                        <span class="input-group-addon"><i class="fa fa-globe"></i></span>
                                                        <select name="country-image" id="country-image" class="form-control" multiple="multiple">
                                                            <option value=""> - Select Country - </option>
                                                            <option value="PH" data-img-src="<?= base_url() ?>resources/images/cartoons/grim/1.jpg">Philippines</option>
                                                            <option value="US" data-img-src="<?= base_url() ?>resources/images/cartoons/grim/2.png">United States</option>
                                                            <option value="PH" data-img-src="<?= base_url() ?>resources/images/cartoons/grim/3.png">Pakistan</option>
                                                            <option value="US" data-img-src="<?= base_url() ?>resources/images/cartoons/grim/2.png">Vietnam</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="form-group row">
                                            <label for="wysiwyg" class="control-label col-3">WYSIWYG</label>
                                            <div class="control-group col-9">
                                                <div class="input-size">
                                                    <textarea name="wysiwyg" id="wysiwyg" class="form-control"></textarea>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="form-group row">
                                            <label for="multiple-upload" class="control-label col-3">Multiple Upload</label>
                                            <div class="control-group col-9">
                                                <div class="input-size">
                                                    <div id="multiple_upload" class="plupload">
                                                        No Flash
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </fieldset>
                                <div class="submit-group col-12 align-right">
                                    <input name="submit" class="btn btn-primary" value="Submit" type="submit">
                                    <input name="cancel" class="btn btn-default" value="Cancel" type="button">
                                </div>
                            </form>
                            
                        </div>
                    </div>
                </div>
            </section>
            <!-- page-script -->
            <script type="text/javascript" src="<?= base_url() ?>js/scripts/form-advance-validation.js"></script>
        </div>